<template>
    <div class="header1">
         <div><i class="iconfont icon-xiangzuojiantou" v-if="$route.name =='Item'" @click="goHome" ></i></div>
        <!-- 使用插槽 -->
        <div><slot></slot></div>
        <div><i class="iconfont icon-hanbaobao" v-if="$route.name !='Item'"></i></div>
    </div>
</template>

<script>
export default {
    name: 'Header1',

    data() {
        return {
            
        };
    },

    methods: {
        goHome:function(){
            this.$router.push("/") //返回首页
        }
    },
    mounted(){
        console.log(this.$router.name);
    },
    components:{},
};
</script>

<style scoped>
    .icon-xiangzuojiantou {
        font-size: 30px;
    }
    .header1 {
        width: 100%;
        height: 50px;
        color: #fff;
        background: #e54847;
        line-height:  50px;
        display:flex;
        justify-content: space-around;
        text-align: center;
        font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    }
    .header1 div:nth-of-type(1){
        width: 10%;
    }
   .header1 div:nth-of-type(2){
        width: 80%;
        font-size: 18px;
        
    }  
    .header1 div:nth-of-type(3){
        width: 10%;
        
    }
    .header1 div:nth-of-type(3) .iconfont {
        color: #fff;
        font-size: 18px;
    }
</style>